// 商品库
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import {addspecsLibraryData, editspecs, delspecs} from '../../api';
import action from '../../store/actions/specsLibrary';
import {Drawer, Button, Input, Form, Popconfirm, message} from 'antd';
import MyUpload from './MyUpload';
import './Header.scss';


class SpecsLibraryHeader extends Component {

  state = {
    isAdd: false,
    visible: false,
    popVisible: false
  };
  // 抽屉 来确认是点击了增加还是修改
  showDrawer = isAdd => {
    if (isAdd === 1) {
      this.setState({
        isAdd: true
      });
    } else if (isAdd === 2) {
      this.setState({
        isAdd: false
      });
    }
    this.setState({
      visible: true
    });
    this.props.form.resetFields();
  };

  // 抽屉点击关闭
  onClose = () => {
    this.setState({
      visible: false
    });
    this.props.form.resetFields();
  };

  // 气泡点击确认 刪除
  async confirm() {
    const {activeKey, isSelected, GET_SPECSLIBRARY_INFO} = this.props;
    delspecs(activeKey)
      .then(res => {
        GET_SPECSLIBRARY_INFO(isSelected);
      })
      .catch(err => {
        console.log(err);
      });
    this.setState({
      popVisible: false
    });
  }

  // 气泡点击取消
  cancel = () => {
    this.setState({
      popVisible: false
    });
  };

  // 删除按钮点击事件
  delSpecs = () => {
    this.setState({
      popVisible: true
    });
  };

  handleOk = e => {
    e.preventDefault();
    const {isSelected: cate_code, GET_SPECSLIBRARY_INFO} = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (this.state.isAdd) {
          // 增加
          addspecsLibraryData(cate_code, values.name).then(res => {
            GET_SPECSLIBRARY_INFO(cate_code);
          }).catch(err => {
            console.log(err);
          });
        } else {
          // 修改
          const {activeKey} = this.props;
          console.log(activeKey);
          editspecs(values.name, activeKey).then(res => {
            GET_SPECSLIBRARY_INFO(cate_code);
          }).catch(err => {

          });
        }

        this.setState({
          visible: false
        });

      }
    });
  };


  render() {
    const {isSelected, specsIsSelect, activeKey, activeTitle} = this.props;
    const {getFieldDecorator} = this.props.form;
    return (
      <>
        <div className='MaterialGroup__head'>
          <h3>规格库</h3>
          <MyUpload/>
          <div className='specs_header_button'>
            <Button type="primary" onClick={() => this.showDrawer(1)} disabled={!specsIsSelect}> 增 加</Button>
            <Button type="dashed" onClick={() => this.showDrawer(2)} disabled={!activeKey}>修 改</Button>
            {/*删除气泡开始*/}
            <Popconfirm
              visible={this.state.popVisible}
              placement="bottomRight"
              title="确定要删除该规格组么？"
              okText="确定"
              cancelText="取消"
              onConfirm={this.confirm.bind(this)}
              onCancel={this.cancel}
            >
              <Button type="danger" disabled={!activeKey} onClick={this.delSpecs}>删 除</Button>
            </Popconfirm>
            {/*删除气泡结束*/}
          </div>

        </div>
        {/*抽屉开始*/}
        <Drawer
          width={500}
          title="规格"
          placement="right"
          closable={true}
          onClose={this.onClose}
          visible={this.state.visible}
        >

          <Form className="drawer-form" onSubmit={this.handleOk}>

            <Form.Item label='名称'>
              {getFieldDecorator('name', {
                initialValue: activeTitle || '',
                rules: [{
                  required: true,
                  message: '请填写名称...'
                }]
              })(
                <Input placeholder='名称'/>
              )}
            </Form.Item>
            <Form.Item>
              <div id='drawer-form-buttons'>
                <Button type="primary" className="drawer-form-button" onClick={this.onClose}>取 消</Button>
                <Button type="danger" className="rawer-form-button" onClick={this.handleOk}>确 定</Button>
              </div>
            </Form.Item>
          </Form>
        </Drawer>
        {/*抽屉结束*/}
      </>
    );
  }

}

const mapStateToProps = state => {
  return {
    isSelected: state.specsLibrary.specsSelect,  // 所选中的 code
    specsIsSelect: state.specsLibrary.specsIsSelect,  // 是否选中
    activeKey: state.specsLibrary.activeKey, //  折叠面板所选中的code
    activeTitle: state.specsLibrary.activeTitle //  折叠面板所选中的title
  };
};

const WrappedNormalLoginForm = Form.create()(SpecsLibraryHeader);   // ant上要求假的 如果不加这句代码就会失效
export default connect(mapStateToProps, action)(withRouter(WrappedNormalLoginForm));
